<template>
  <el-dialog
    v-model="visible"
    :top="top"
    :width="width"
    :title="title"
    :destroy-on-close="destoryOnClose"
    :close-on-click-modal="closeOnClickModal"
    :modal="modal"
    :fullscreen="fullscreen"
    :append-to-body="appendToBody"
    :lock-scroll="lockScroll"
    :open-delay="openDelay"
    :close-delay="closeDelay"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    :draggable="draggable"
    :center="center"
    :align-center="alignCenter"
    v-bind="$attrs"
  >
    <component :is="componentName" :dialogParams="dialogParams" v-bind="$attrs"></component>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue' // ref 接受一个内部值，返回一个响应式的、可更改的 ref 对象
// 定义props
const props = defineProps({
  // 距离顶部的高度
  top: {
    type: String,
    default: '15vh',
    required: false
  },
  // 弹窗的宽度
  width: {
    type: String,
    default: '800px',
    required: false
  },
  // 弹窗的title
  title: {
    type: String,
    required: true
  },
  // 关闭时是否销毁 Dialog 中的元素
  destoryOnClose: {
    type: Boolean,
    default: true,
    required: false
  },
  // 是否可以通过点击 modal 关闭 Dialog
  closeOnClickModal: {
    type: Boolean,
    default: false,
    required: false
  },
  // 组件名称
  componentName: {
    type: Object,
    required: true
  },
  // 传入弹窗中的参数
  dialogParams: {
    type: Object,
    default() {
      return {}
    },
    required: false
  },
  // 是否需要遮罩层
  modal: {
    type: Boolean,
    default: true,
    required: false
  },
  // 是否为全屏 Dialog
  fullscreen: {
    type: Boolean,
    default: false,
    required: false
  },
  // Dialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 true
  appendToBody: {
    type: Boolean,
    default: true,
    required: false
  },
  // 是否在 Dialog 出现时将 body 滚动锁定
  lockScroll: {
    type: Boolean,
    default: true,
    required: false
  },
  // Dialog 打开的延时时间，单位毫秒
  openDelay: {
    type: Number,
    default: 0,
    required: false
  },
  // Dialog 关闭的延时时间，单位毫秒
  closeDelay: {
    type: Number,
    default: 0,
    required: false
  },
  // 是否可以通过按下 ESC 关闭 Dialog
  closeOnPressEscape: {
    type: Boolean,
    default: false,
    required: false
  },
  // 是否显示关闭按钮
  showClose: {
    type: Boolean,
    default: true,
    required: false
  },
  // 为 Dialog 启用可拖拽功能
  draggable: {
    type: Boolean,
    default: false,
    required: false
  },
  // 是否让 Dialog 的 header 和 footer 部分居中排列
  center: {
    type: Boolean,
    default: false,
    required: false
  },
  // 是否水平垂直对齐对话框
  alignCenter: {
    type: Boolean,
    default: false,
    required: false
  }
})
// 定义响应式变量
let visible = ref(true)
</script>
